
<link rel="stylesheet" type="text/css" href="/public/static/plugin/inputSearch/autocomplete.css" />

            <{if isset($info.id) }>

                <tr class="attach-info" for="1" style="display: table-row;">
                    <th class="th-label">发送道具</th>
                    <td>
                        <ul class="nav send-item-list">
                        	<{if $info.item == '' }>
                        	<li class="fli">
                                <div class="div_item_name"></div>
                                <div class="div_item_id"></div>
                                <input type="text" name="item_number[]" class="form-control inline" placeholder="数量" size="12" />
                                <select name="is_bind[]" class="form-control inline">
                                	<option value="1">绑定</option>
                                	<option value="0">不绑定</option>
                                </select>
                                <div class="box-tools inline">
                                    <a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                                    <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                                </div>                              
                                <input type="text" name="item_description[]" class="form-control inline" placeholder="描述" size="30" />
                            </li>
                            <{else}>
                            <{foreach from=$info.item item=item key=key}>
                            <li class="fli">
                                <div class="div_item_name" id="div_item_name_<{$key}>"></div>
                                <div class="div_item_id" id="div_item_id_<{$key}>"></div>
                                <input type="text" name="item_number[]" class="form-control inline" placeholder="数量" size="12" value="<{$item.item_number}>" />
                                
                                <select name="is_bind[]" class="form-control inline">
                                	<option value="1" <{if $item.is_bind == 1 }>selected<{/if}>>绑定</option>
                                	<option value="0" <{if $item.is_bind == 0 }>selected<{/if}>>不绑定</option>
                                </select>
                                <div class="box-tools inline">
                                    <a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                                    <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                                </div>                               
                                <input type="text" name="item_description[]" class="form-control inline" placeholder="描述" size="30" />
                            </li>
                            <script>
$(document).ready(function(){
	$('#div_item_name_<{$key}>').autocomplete({
		placeholder: '道具名称',
		hints: proposals,
		value: '<{$item.item_name}>',
		width: 150,
		height: 34,
		showButton: false,
		name:'item_name[]',
		onSubmit: sub,
		onBlur:blur,
		search:search
	});
	
	$('#div_item_id_<{$key}>').autocomplete({
		placeholder: '道具名称',
		hints: proposals,
		value: '<{$item.item_id}>',
		width: 150,
		height: 34,
		showButton: false,
		name:'item_id[]',
		onSubmit: sub,
		onBlur:blur,
		search:search
	});
});
                            </script>
                            <{/foreach}>
                            <{/if}>
                        </ul>

                        <span class="description">道具ID/数量为必填,有一项为空表示不发送道具.</span>
                    </td>
                </tr>

                
            <{else}>
                <tr class="attach-info" for="1" style="display: table-row;">
                    <th class="th-label">发送道具</th>
                    <td>
                        <ul class="nav send-item-list">
                            <li class="fli">
                                <div class="div_item_name"></div>
                                <div class="div_item_id"></div>
                                <input type="text" name="item_number[]" class="form-control inline" placeholder="数量" size="12" />
                                <select name="is_bind[]" class="form-control inline">
                                	<option value="1">绑定</option>
                                	<option value="0">不绑定</option>
                                </select>
                                <div class="box-tools inline">
                                    <a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>
                                    <a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>
                                </div>                              
                                <input type="text" name="item_description[]" class="form-control inline" placeholder="描述" size="30" />
                            </li>
                        </ul>

                        <span class="description">道具ID/数量为必填,有一项为空表示不发送道具.</span>
                    </td>
                </tr>
            <{/if}>
            

<script type="text/javascript">
    $(function(){
    	var attach_edit_info = '<li class="fli">';
    	attach_edit_info += '<div class="div_item_name"></div>';
    	attach_edit_info += '<div class="div_item_id"></div>';
    	attach_edit_info += '<input type="text" name="item_number[]" class="form-control inline" placeholder="数量" size="12" />';
    	attach_edit_info += '<select name="is_bind[]" class="form-control inline"><option value="1">绑定</option><option value="0">不绑定</option></select>';
    	attach_edit_info += '<div class="box-tools inline">';
    	attach_edit_info += '<a href="javascript:;" class="tools-btn tools-btn-add badge bg-green"><i class="fa fa-plus"></i></a>';
    	attach_edit_info += '<a href="javascript:;" class="tools-btn btn-del badge bg-red"><i class="fa fa-minus"></i></a>';
    	attach_edit_info += '</div>';
    	attach_edit_info += '<input type="text" name="item_description[]" class="form-control inline" placeholder="描述" size="30" />';
    	attach_edit_info += '</li>';
    	
        var cloneItem = $(".send-item-list li:first-child").clone();
        <{if isset($info.id) }>
        cloneItem = attach_edit_info;
        <{/if}>

        $(".tools-btn-add").live('click',function(){
        	var length = $(".send-item-list .fli").length;
        	if(length > 4){
        		layer.alert('发送的道具不能大于5种');
        		return false;
        	}
            var li = $(this).closest('li');
            <{if isset($info.id) }>
            var oneClone = $(cloneItem).clone(); //先转jquery对象
            <{else}>
            var oneClone = cloneItem.clone();            
            <{/if}>

            oneClone.insertAfter(li);
            oneClone.find('.sel-item-list').chosen();
            
            oneClone.find('.div_item_name').autocomplete({
            	placeholder: '道具名称',
		        hints: proposals,
		        width: 150,
		        height: 34,
		        showButton: false,
		        name:'item_name[]',
		        onSubmit: sub,
		        onBlur:blur,
		        search:search
	        });
            
            oneClone.find('.div_item_id').autocomplete({
            	placeholder: '道具ID',
            	hints: item_id,
            	width: 150,
            	height: 34,
            	showButton: false,
            	name:'item_id[]',
            	//onSubmit: sub1,
            	//onBlur:blur1,
            	//search:search1
            });
            
            
        });


        $(".btn-del").live('click',function(){
            if(!window.confirm('是否要删除该条数据?')) return true;
            var li = $(this).closest('li'),
                ul = li.closest('ul');

            if(ul.children('li').length > 1){
                li.remove();
            }else{
                li.find('select, input').val('').change();
            }
        });

        
        
    });
</script>

<script src="/public/static/plugin/inputSearch/autocomplete.js"></script>
<script>
$(document).on('keyup','input[name="item_name[]"]',function(){
	
});

var proposals = {};


//根据道具名称搜索出道具id
var sub = function(val,input){
	getValue(val,input,1);
};

var blur =function(val,input){
	getValue(val,input,1);
};

var search = function(val){
	var data = selectGoods(val,1);
	return data;
};
$(document).ready(function(){
	<{if !isset($info.id) || $info.item == ''}>
	$('.div_item_name').autocomplete({
		placeholder: '道具名称',
		hints: proposals,
		width: 150,
		height: 34,
		showButton: false,
		name:'item_name[]',
		onSubmit: sub,
		onBlur:blur,
		search:search
	});
	<{/if}>
});


function selectGoods(val,type){
	var g = $('input[name="g"]').val();
	var url = '?r=goods/autoComplete&g='+g;
	var json = '';
	$.ajax({
    	type : 'POST',
    	url : url,
    	async:false,
		data : {'val':val,'type':type},
		dataType :'JSON',
		success : function(res){
			if(res.status == 1){
				json = res.data;
			}else{
					
			}
		}
	});
	return json;
}

function getValue(val,input,type){
	var g = $('input[name="g"]').val();
	var url = '?r=goods/getValue&g='+g;
	$.ajax({
    	type : 'POST',
    	url : url,
		data : {'val':val,'type':type},
		dataType :'JSON',
		success : function(res){
			if(res.status == 1){
				if(type == 1){
					input.parent('div').parent('div').parent().find("input[name='item_id[]']").val(res.data.gid);
					input.parent('div').parent('div').parent().find("input[name='item_number[]']").attr('data-max',res.data.max_overlap);
					input.parent('div').parent('div').parent().find("input[name='item_description[]']").val(res.data.description);
				}else if(type == 2){
					input.parent('div').parent('div').parent().find("input[name='item_name[]']").val(res.data.name);
					input.parent('div').parent('div').parent().find("input[name='item_number[]']").attr('data-max',res.data.max_overlap);
					input.parent('div').parent('div').parent().find("input[name='item_description[]']").val(res.data.description);
				}
			}else{
					
			}
		}
	});
}

</script>


<script>
var item_id = {};
//根据道具id搜索出道具名称
var sub1 = function(val,input){
	getValue(val,input,2);
};

var blur1 =function(val,input){
	getValue(val,input,2);
};

var search1 = function(val){
	var data = selectGoods(val,2);
	return data;
};

$(document).ready(function(){
	<{if !isset($info.id) || $info.item == '' }>
	$('.div_item_id').autocomplete({
		placeholder: '道具ID',
		hints: item_id,
		width: 150,
		height: 34,
		showButton: false,
		name:'item_id[]',
		//onSubmit: sub1,
		//onBlur:blur1,
		//search:search1
	});
	<{/if}>
});


</script>



<script>
	$("input[name='item_number[]']").live('blur',function(){
		var max_overlap = $(this).attr('data-max');
		var num = $(this).val();
		var _this = $(this);
		if( parseInt(num) > parseInt(max_overlap)){
			layer.alert('该道具的最大数量是'+max_overlap, {icon: 2, skin: 'layui-layer-molv'});
			_this.val(max_overlap);
		}
	});	
</script>




